<template>
 <div class="main">
        <ul class="album album-leader">
            <li style="background: white;" class="title">我关注的大师</li>
            <empty v-show="empty"></empty>

        <li style="background: white" v-for="(lawyer, index) in lawyers">
          <router-link :to="'/professor/'+lawyer.id">
            <div class="avatar" style="position:relative;width:2.2rem;height:2.2rem;border-radius:50%;display:inline-block;">
              <img style="position:relative;width:2.2rem;height:2.2rem;border-radius:50%;display:inline-block;" class="avatarImg" :src="lawyer.avatar">
              <!--<img class="verified" style="position:absolute;width:0.8833333333333333rem;height:0.8833333333333333rem;right:0;bottom:0;"
                src="/fengshui/static/pic/icon/verified.png">-->
                </div>
            <p></p>
            <p>{{lawyer.name}}</p>
            <p class="description">{{lawyer.title}}</p>
            <!--<p class="description">{{lawyer.description}}</p>-->
            <p class="description">
        <span>{{lawyer.answer_count}}</span>    
        <span>个回答，</span>
        <span>{{lawyer.follow_count}}</span>
        <span>人收听</span></p>
          </router-link>
          <follow-btn class="follow-btn" :professorid="lawyer.id" :index="index" v-on:followStatusChange="updateProfessorList"  :followid="lawyer.follow_id" ></follow-btn>
        </li>
           <infinite-loading :on-infinite="onInfinite"  distance="10" ref="infiniteLoading">
                   <i slot="spinner" class="loading-customer-spiral"></i>
                   <p slot="no-more">到底了 :)</p>
             </infinite-loading>
        </ul>

<customer-footer></customer-footer>
    </div>

</template>

<script>
    import InfiniteLoading from 'vue-infinite-loading';

    export default {
        components: {
            InfiniteLoading
        },
        data() {
            return {
                lawyers: [

                ],
                page_index: 0,
                page_count: 100,
                count: 0,
                busy: false,
                empty: false
            }
        },
        methods: {
            updateProfessorList: function(index, followId) {
                this.lawyers.splice(index, 1);
            },
            onInfinite: function() {
                let vm = this;
                if (vm.page_index >= vm.page_count) {
                    return;
                }
                let params = {
                    p: vm.page_index + 1
                }
                vm.$http.jsonp(vm.url.acid + "&do=FollowProfessors", {
                    params: params
                }).then(response => {
                    let json = response.body
                    vm.page_count = json.page_count
                    vm.lawyers = vm.lawyers.concat(json.data)
                    vm.count = json.count;
                    vm.page_index = json.page_index;
                    if (json.data.length == 0) {
                        vm.empty = true;
                    }
                    vm.$refs.infiniteLoading.$emit('$InfiniteLoading:loaded');
                    if (vm.page_index >= vm.page_count) {
                        vm.$refs.infiniteLoading.$emit('$InfiniteLoading:complete');
                    }

                    //当前页等于最后一页停止加载数据
                }, response => {
                    vm.$refs.infiniteLoading.$emit('$InfiniteLoading:complete');
                    showLoading(vm, "获得风水大师列表失败！");
                });
            }
        }
    }
</script>

<style>
    .album {
        margin-bottom: .5rem;
    }
    
    li,
    ol,
    ul {
        list-style: none;
    }
    
    .album li {
        position: relative;
        box-sizing: border-box;
        height: 4.15rem;
        border-top: 1px solid #e5e5e5;
        padding: 1rem 2.75rem 0 4.15rem;
        background-size: 2.65rem 2.65rem;
        background-position: left .75rem center;
        background-repeat: no-repeat;
    }
    
    .album .title {
        height: 2.25rem;
        line-height: 2.25rem;
        color: #999;
        font-size: .7rem;
        text-align: center;
        padding: 0;
        margin-bottom: .25rem;
    }
    
    .album-leader li {
        height: auto;
        padding: .7rem 2.75rem .7rem 4.15rem;
    }
    
    .album li .avatar {
        position: absolute!important;
        top: .555rem;
        left: .75rem;
    }
    
    .album-leader li .avatar {
        top: 1.2rem;
        width: 2.65rem;
        height: 2.65rem;
    }
    
    .album li p {
        color: #3f3f3f;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: .8rem;
        line-height: 1.2rem;
    }
    
    .album li .description {
        font-size: .65rem;
        line-height: .9rem;
        color: #999;
    }
    
    .album-leader li .follow {
        padding-top: 0.5rem;
    }
    
    .album li .follow-btn {
        position: absolute;
        top: .025rem;
        right: .75rem;
        padding-top: 1.08rem;
    }
    
    a,
    img {
        -webkit-touch-callout: none;
        text-decoration: none;
    }
</style>